<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>7.5节,仿QQ菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="../../extend/animateManage.js"></script>
</head>
<style>
    a{
        text-decoration:none;
    }
    /*==================仿QQ菜单=====================start*/
    #likeQQMenue{
        position: relative;
        width: 261px;
        height: 522px;
        border: 1px solid #9DC3E7;
        background-color: #F5FAFD;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        font: 12px/1.5 tahoma,helvetica,clean,sans-serif;
    }
    .likeQQMenueLists{
        width: 100%;
        margin: 10px;
    }
    .relationList .lists div{
        position: relative;
        float: left;
    }
    .relationList .lists .images img{
        width: 20px;
        height: 20px;
    }
    .likeQQMenueLists .lists{
        width: 80%;
        position: relative;
        left: 6%;
        clear: both;
        height: 30px;
    }
    .relationMenu{
        background: url(../images/icons.png) 0px 0px no-repeat;
        zoom: 1;
        line-height: 30px;
        width: 10px;
        height: 10px;
        cursor: pointer;
        color: #000;
    }
    .relationMenu.on{
        background: url(../images/icons.png) -16px 0px no-repeat;
        zoom: 1;
        line-height: 30px;
        width: 10px;
        height: 10px;
        cursor: pointer;
        color: #000;
    }
    .likeQQMenueLists div{
        position: relative;
        float: left;
    }
    .relationTitle{
        top: -5px;
    }
</style>
<body>
    <h2>仿QQ菜单</h2>
    <!--QQ菜单最外层-->
    <div id='likeQQMenue'>
        <!--好友-->
        <div class="likeQQMenueLists" data-targetID='relationList1'>
            <div class="relationMenu">&nbsp;</div>
            <div class="relationTitle">&nbsp;好友[11/11]</div>
        </div>
        <!--好友-关系列表-->
        <div class="relationList likeQQMenueLists" id='relationList1'>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;张王</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小李</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;老孙</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;赵五</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小龙</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小韩</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;赵五</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小龙</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小韩</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;赵五</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小龙</a>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
        <!--黑名单-->
        <div class="likeQQMenueLists" data-targetID='relationList2'>
            <div class="relationMenu">&nbsp;</div>
            <div class="relationTitle">&nbsp;黑名单[3/3]</div>
        </div>
        <!--好友-关系列表-->
        <div class="relationList likeQQMenueLists" id='relationList2'>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;赵五</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小龙</a>
                </div>
            </div>
            <div class="lists">
                <!--头像-->
                <div class="images">
                    <img src='../images/my.jpg'/>
                </div>
                <!--昵称-->
                <div class="nickname">
                    <a href="javascript:void(0)">&nbsp;小韩</a>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
    window.onload = function(){
        function getTypeElement(es, type){//获取指定类型的节点
            var esLen = es.length,
                    i = 0,
                    eArr = [],
                    esI = null;
            for(; i < esLen ; i++){//获取所有元素
                esI = es[i];
                if(esI.nodeName.replace("#", "").toLocaleLowerCase() == type){
                    eArr.push(esI);
                }
            }
            return eArr;
        }
        function likeQQMenue(){//QQ菜单
            var ls = document.getElementById("likeQQMenue").childNodes,
                    li = 0,
                    ll = ls.length,
                    lo = null;
            for(; li < ll ; li++){
                lo = ls[li];
                if(lo.className == "likeQQMenueLists"){
                    lo.onclick = function(){
                        var divs = getTypeElement(this.childNodes, "div"),
                                dis = "block",
                                classNames = divs[0].className,
                                target = document.getElementById(this.getAttribute("data-targetID"));

                        if(classNames == "relationMenu on"){//展开列表
                            divs[0].className = "relationMenu";
                            target.style.display = "block";
                        }
                        else{ //收缩列表
                            divs[0].className = "relationMenu on";
                            target.style.display = "none";
                        }
                    }
                }
            }
        }
        likeQQMenue();

    };
</script>

</body>
</html>